"use client";

import { Icon } from "@/components/Icon";
import { useIsMobile } from "@/hooks/use-mobile";
import classNames from "classnames";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";

const leftNavBarList = [
  {
    icon: "shouye",
    name: "首页",
    style: { marginBottom: "2px", fontSize: "23px" },
    link: "/",
  },
  {
    icon: "wenzhang",
    name: "文章",
    style: { fontSize: "26px" },
    link: "/blog",
  },
  {
    icon: "youxi",
    name: "游戏",
    style: { fontSize: "26px" },
    link: "/game",
  },
  {
    icon: "c",
    name: "关于",
    style: { fontSize: "26px" },
    link: "/about",
  },
];

const rightNavBarList = [
  {
    icon: "setting",
    name: "后台",
    style: { fontSize: "26px" },
    link: "/admin",
  },
];

export interface NavBarProps {
  hollow?: boolean;
}

export const NavBar = ({ hollow = false }: NavBarProps) => {
  const isMobile = useIsMobile();
  const pathname = usePathname();
  const navBarRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const onScroll = (_: Event) => {
      setScrollY(window.scrollY);
    };

    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  useEffect(() => {
    if (!navBarRef.current) return;
    if (scrollY > 60) {
      navBarRef.current.style.backgroundColor = `rgba(255,255,255)`;
      if (!titleRef.current) return;
      titleRef.current.style.opacity = "1";
      titleRef.current.style.pointerEvents = "auto";
    } else {
      navBarRef.current.style.backgroundColor = `rgba(255,255,255,${
        scrollY / 60
      })`;
      if (!titleRef.current) return;
      titleRef.current.style.opacity = `${scrollY / 60}`;
      titleRef.current.style.pointerEvents = "none";
    }
  }, [scrollY]);

  return (
    <header
      ref={navBarRef}
      className="fixed h-[60px] w-full z-[990] flex items-center justify-between px-4 navBar-animation"
      style={{
        pointerEvents: hollow ? "none" : "auto",
      }}
    >
      {/* 左边的菜单 */}
      <div className="flex-1 h-full flex items-center gap-5">
        {leftNavBarList.map((navBarItem, index) => (
          <Link
            href={navBarItem.link}
            key={index}
            className={classNames(
              "h-full flex items-center justify-center cursor-pointer hover:text-[#333] pointer-events-auto",
              pathname === navBarItem.link ? "text-[#333]" : "text-[#999]"
            )}
          >
            <Icon name={navBarItem.icon} style={navBarItem.style} />
          </Link>
        ))}
      </div>
      {/* 中间的标题 */}
      {!isMobile && (
        <div
          ref={titleRef}
          className="flex-1 h-full flex items-center justify-center font-light text-xl"
        >
          <Link href="/">家哈哥的秘密基地</Link>
        </div>
      )}

      {/* 右边的菜单 */}
      <div className="flex-1 h-full flex items-center gap-5 justify-end">
        {rightNavBarList.map((navBarItem, index) => (
          <Link
            href={navBarItem.link}
            key={index}
            className={classNames(
              "h-full flex items-center justify-center cursor-pointer hover:text-[#333] pointer-events-auto",
              pathname === navBarItem.link ? "text-[#333]" : "text-[#999]"
            )}
          >
            <Icon name={navBarItem.icon} style={navBarItem.style} />
          </Link>
        ))}
      </div>
    </header>
  );
};
